<template>
  <div class="Institutionalregistration">
    <div class="container">
      <!-- 头部信息 -->
      <header>
        <div class="filter-part">
          <div class="filter-item">
            <fourLevelLinkage
              @changeProvince="(val) => {filterObj.provinceCode = val; filterObj.cityCode = '';filterObj.areaCode = '', filterObj.hospitalId = ''}"
              @changeCity="(val) => {filterObj.cityCode = val; filterObj.areaCode = '';filterObj.hospitalId = ''}"
              @changeArea="(val) => {filterObj.areaCode = val; filterObj.hospitalId = ''}"
              @changeHospital="(val) => filterObj.hospitalId = val"
              :province="filterObj.provinceCode"
              :city="filterObj.cityCode"
              :area="filterObj.areaCode"
              :hospital="filterObj.hospitalId"
            ></fourLevelLinkage>
          </div>
          <div class="filter-item">
            <Input v-model="filterObj.ypmc" placeholder="药品名称"/>
          </div>
           <div class="filter-item">
            <Input v-model="filterObj.code" placeholder="药品编码"/>
          </div>
           <div class="filter-item">
            <Input v-model="filterObj.scqymc" placeholder="药品厂家"/>
          </div>
           <div class="filter-item">
            <Input v-model="filterObj.pzwh" placeholder="批准文号"/>
          </div>
           <div class="filter-item">
            <InputNumber v-model="filterObj.stockFrom" :precision="0" placeholder="库存数量范围" />
            <span style="lineHeight: 2; padding: 0 5px">~</span>
            <InputNumber v-model="filterObj.stockEnd" :precision="0" placeholder="库存数量范围" />
          </div>
          <div class="filter-btn-group">
            <Button style="width:51px;height:35px;" type="primary" @click="cloudStockMonitorList()" icon="ios-search"></Button>
            <Button style="width:51px;height:35px;" @click="reset">
              <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
            </Button>
          </div>
        </div>
      </header>
      <!-- 列表 -->
      <div class="list">
        <Table
          border
          :columns="column"
          :data="list"
          stripe
          no-filtered-data-text="未查询到符合条件的记录"
          @on-selection-change="selectChange"
        ></Table>
      </div>
      <!--分页器-->
      <div class="page">
            <Page :total="pagetotal" :current="filterObj.pageNo" :page-size="filterObj.pageSize" show-total show-elevator @on-change="pageChange"/>
        </div>
    </div>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import fourLevelLinkage from "@/components/fourLevelLinkage";

const filterObj = {
  provinceCode: null,
  cityCode: null,
  areaCode: null,
  hospitalId: null,
  ypmc: null,
  code: null,
  scqymc: null,
  pzwh: null,
  stockFrom: null,
  stockEnd: null,
  pageSize: 10,
  pageNo: 1
};
export default {
  components: {
    fourLevelLinkage
  },
  data() {
    return {
      pagetotal: null,
      pageList: [
        {
          value: 5,
          label: 5
        },
        {
          value: 10,
          label: 10
        },
        {
          value: 20,
          label: 20
        },
        {
          value: 50,
          label: 50
        }
      ],
      filterObj: this.deepClone(filterObj),
      isBack: 1,
      list: [],
      column: [
        {
          title: "排序",
          key: "sum",
          align: "center",
          width: 70,
          render: (h, params) => {
              let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
              return h("span", sum);
          }
        },
        {
          title: "药品名称",
          key: "ypmc",
          align: "center"
        },
        {
          title: "药品编码",
          key: "code",
          align: "center"
        },
        {
          title: "药品剂型",
          key: "ypjx",
          align: "center"
        },
        {
          title: "药品规格",
          key: "ypgg",
          align: "center"
        },
        {
          title: "药品厂家",
          key: "scqymc",
          align: "center"
        },
        {
          title: "批准文号",
          key: "pzwh",
          align: "center"
        },

        {
          title: "药品单位",
          key: "zxbzdw",
          align: "center"
        },
        {
          title: "库存数量",
          key: "stockTotal",
          align: "center"
        },
        {
          title: "药品金额",
          key: "priceTotal",
          align: "center"
        },
        {
          title: "设置",
          align: "left",
          width: 100,
          render: (h, params) => {
            let row = params.row;
              return h("div", [
                h(
                  "a",
                  {
                    props: {
                      size: "small",
                      type: 'primary'
                    },
                    on: {
                      click: () => {
                        this.details(row);
                      }
                    }
                  },
                  "明细"
                ),
              ]);
          }
        }
      ]
    };
  },
  created() {
    this.province = this.$route.query.province
      ? parseInt(this.$route.query.province)
      : null;
    this.city = this.$route.query.city
      ? parseInt(this.$route.query.city)
      : null;
    this.area = this.$route.query.area
      ? parseInt(this.$route.query.area)
      : null;

    this.isBack = this.$route.query.isBack
      ? parseInt(this.$route.query.isBack)
      : 1;
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "",
        title: "药品云库存管理"
      },
      {
        path: "/index/drugfirmsmanage/cloudStockManagement/list",
        title: "云库存实时监管"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let pageNo = this.$route.query.pageNo;
    if (pageNo) {
      this.pageNo = parseInt(pageNo);
    }
    this.cloudStockMonitorList();
  },
  methods: {
    reset() {
      this.filterObj = this.deepClone(filterObj);
      this.cloudStockMonitorList();
    },
    changeProvince(val) {
      this.filterObj.province = val;
    },
    changeCity(val) {
      this.filterObj.city = val;
    },
    changeArea(val) {
      this.filterObj.area = val;
    },
    changeHospital(val) {
        this.filterObj.hospital = val;
    },
    pageChange(index) {
      this.filterObj.pageNo = index;
      this.cloudStockMonitorList();
    },
    // 药店详情
    details(item) {
      const { drugId } = item;
      let hosid
      if(this.filterObj.hospitalId!=null||this.filterObj.hospitalId!=''){
        hosid = this.filterObj.hospitalId
        this.functionJS.queryNavgationTo(
          this,'/index/drugfirmsmanage/cloudStockManagement/medicalDetailList',{drugId,hosid,id:item.id});
      }else{
        this.functionJS.queryNavgationTo(
          this,'/index/drugfirmsmanage/cloudStockManagement/medicalDetailList',{drugId,id:item.id }
        );
      }
    },
    cloudStockMonitorList() {
      let params = this.deepClone(this.filterObj);
      console.log('入参cloudStockMonitorList', JSON.stringify(params));
      this.$axios.post(api.findStockSupervisePage, params).then(res => {
        if (res.data.code === 1) {
          let ret = res.data.object;
          // 生成排序字段
          if(ret.records){
            ret.records.forEach((item, index) => {
              item.sum = this.addZeros(index);
            });
            this.list = ret.records;
            this.pagetotal = ret.total;
          }else{
            this.list = [];
          }
        } else {
          this.$Message.info(res.data.message);
        }
      });
    },
    deepClone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  },
  watch: {
    'filterObj.pageSize'(nv, ov) {
      this.filterObj.pageNo = 1;
      this.cloudStockMonitorList();
    }
  },
};
</script>
<style lang="less" scoped>
.Institutionalregistration {
  padding: 10px;
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  .container {
    width: 100%;
    margin: 0 auto;
    .filter-part {
      display: flex;
      flex-wrap: wrap;
      .filter-item {
        display: flex;
        margin: 10px 10px 10px 0;
        label {
          white-space: nowrap;
          line-height: 32px;
          padding-left: 5px;
          text-align: right;
        }
        .input {
          width: 220px;
        }
        .select {
          width: 70px;
        }
      }
      .filter-btn-group {
        margin: 10px 10px 10px 0;
        flex: 0 0 auto;
      }
    }
    .page {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }
    header {
      width: 100%;
      .btn {
        margin-top: 10px;
      }
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
  }
}
.drugmanagement-commondrug-list-MedicalModal {
  /deep/ .ivu-modal-wrap {
    label.ivu-form-item-label {
      padding-right: 0;
    }
    .ivu-modal-footer {
      display: none;
    }
    .btn-group {
      text-align: center;
      .save {
        width: 100px;
        margin-right: 20px;
      }
      .close {
        margin-left: 20px;
        width: 100px;
      }
    }
  }
}
.drugmanagement-commondrug-list-delModal {
  /deep/ .ivu-modal-wrap {
    .btn {
      width: 80px;
    }
  }
}
</style>
